<template>
  <!-- <div class="app">
    <div class="job-item" v-for="(item, index) in jobItems">
      <div class="job-item-header">
        <div
          :class="
            'job-type ' +
            (item.type.id !== 1 ? 'job-type-gig' : 'job-type-hourly')
          ">
          <span>{{ item.type.title }}</span>
        </div>
        <span class="job-item-title">{{ item.title }}</span>
      </div>

      <div class="job-item-dateNamount">
        <span style="color: gray">{{ item.date }}</span>
        <span
          >￥<span style="color: #ff9e24">{{ item.amount }}</span
          >/月</span
        >
      </div>

      <div class="job-item-recruitment">
        <div>
          <span>{{ item.recruitment.need }}</span>
          <span>招聘人数</span>
        </div>
        <div>
          <span>{{ item.recruitment.total }}</span>
          <span>申请人数</span>
        </div>
        <div>
          <span>{{ item.recruitment.pass }}</span>
          <span>已录用人数</span>
        </div>
      </div>

      <div class="job-item-footer">
        <span
          :class="
            'job-item-status ' +
            (item.status.id === 1 ? 'recruiting' : 'stophiring')
          "
          >{{ item.status.title }}</span
        >
      </div>
    </div>
    <scroll-view scroll-x>
      <div style="display: flex; flex-wrap: nowrap">
        <div style="padding: 0 1rem; word-break: keep-all">全部</div>
        <div style="padding: 0 1rem; word-break: keep-all">已申请</div>
        <div style="padding: 0 1rem; word-break: keep-all">不录用</div>
        <div style="padding: 0 1rem; word-break: keep-all">已录用</div>
        <div style="padding: 0 1rem; word-break: keep-all">已到岗</div>
        <div style="padding: 0 1rem; word-break: keep-all">未到岗</div>
      </div>

      <div
        style="
          display: flex;
          justify-content: flex-end;
          gap: 0.25rem;
          padding: 0.5rem 1rem;
        ">
        <div
          style="
            font-size: 12px;
            padding: 0.25rem 1rem;
            background-color: rgb(236, 236, 236);
            border-radius: 10rem;
            font-weight: 900;
          "
          @click="toggleBatchEdit">
          {{ isBatchEdit ? "退出批量编辑" : "批量操作" }}
        </div>
        <div
          style="
            font-size: 12px;
            padding: 0.25rem 1rem;
            background-color: rgb(236, 236, 236);
            border-radius: 10rem;
            font-weight: 900;
          "
          v-if="isBatchEdit"
          @click="selectAll">
          {{ isSelectedAll ? "取消全选" : "全选" }}
        </div>
        <div
          style="
            font-size: 12px;
            padding: 0.25rem 1rem;
            background-color: #ff9e24;
            color: white;
            border-radius: 10rem;
            font-weight: 900;
          "
          v-if="isBatchEdit"
          @click="finishBatchEdit">
          完成
        </div>
      </div>
      <scroll-view scroll-y style="height: 300px">
        <div style="display: flex; flex-direction: column">
          <div
            style="display: flex; align-items: center; padding: 1rem"
            v-for="(item, index) in applicantItems"
            :key="index">
            <div v-if="isBatchEdit">
              <checkbox :checked="item.isSeleted" />
            </div>
            <div
              style="
                display: flex;
                flex-direction: column;
                gap: 1rem;
                background-color: white;
                word-break: keep-all;
                width: 100%;
              ">
              <div style="display: flex; justify-content: space-between">
                <div style="display: flex; gap: 0.25rem">
                  <div class="image">
                    <img
                      src="../../images/defultAvatar-1.png"
                      mode=""
                      style="width: 50px; height: 100%" />
                  </div>
                  <div
                    style="display: flex; flex-direction: column; gap: 0.25rem">
                    <div></div>
                    <div style="display: flex; gap: 0.25rem">
                      <span>{{ item.name }}</span>
                      <div class="contant_us">
                        <img
                          src="../../images/man.png"
                          mode=""
                          style="width: 25px; height: 80%" />
                      </div>
                      <span
                        class="real-name"
                        :style="
                          'font-size: 12px;line-height: 1.5rem; padding: 0 .5rem; ' +
                          (item.isRealname ? 'color:#9B7748;' : 'color: red;')
                        "
                        >{{ item.isRealname ? "已实名" : "未实名" }}</span
                      >
                    </div>
                    <div class="b-desc" style="display: flex; gap: 0.25rem">
                      <div class="text">
                        <span style="padding: 0 2px">{{ item.age }}</span>
                      </div>
                      <div class="text">
                        <span style="padding: 0 2px">{{ item.degree }}</span>
                      </div>
                      <div class="text">
                        <span>{{ item.worktime }}经验</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                  ">
                  <span
                    style="
                      width: fit-content;
                      display: flex;
                      align-items: center;
                      color: white;
                      padding: 0 0.5rem;
                      border-radius: 0.3rem;
                      background-color: #34a1ff;
                    "
                    >{{ item.applicantType }}</span
                  >
                  <span style="color: gray">{{ item.location }}</span>
                </div>
              </div>
              <div style="display: flex; justify-content: space-between">
                <div style="display: flex; gap: 0.25rem; align-items: center">
                  <span style="font-size: 12px; color: gray">意向</span>
                  <span>{{ item.intention }}</span>
                </div>
                <div>
                  <span>￥</span>
                  <span style="color: #ff9e24">{{ item.amount }}</span>
                </div>
              </div>
              <div style="display: flex; justify-content: space-between">
                <span style="color: #ff9e24">{{
                  item.isApplicant ? "已申请" : "未申请"
                }}</span>
                <div style="display: flex; gap: 0.25rem">
                  <div
                    style="
                      font-size: 12px;
                      padding: 0.25rem 1rem;
                      border: 1px solid gray;
                      border-radius: 10rem;
                      font-weight: 900;
                    ">
                    录用
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      padding: 0.25rem 1rem;
                      border: 1px solid gray;
                      border-radius: 10rem;
                      font-weight: 900;
                    ">
                    拒绝
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </scroll-view>
    </scroll-view>
  </div> -->

  <view>
    123
  </view>
    
</template>

<script>
export default {
  data() {
    return {
      isBatchEdit: false, // 是否进入批量编辑模式
      isSelectedAll: false, // 是否全选
      applicantItems: [
        /* 这里是您的申请者数据 */
      ],
      jobItems: [
        /* 这里是您的工作数据 */
      ],
      // 其他数据...
    };
  },
  methods: {
    // 切换批量编辑模式
    toggleBatchEdit() {
      this.isBatchEdit = !this.isBatchEdit;
      this.isSelectedAll = false; // 进入批量编辑模式时重置全选状态
    },
    // 全选/取消全选
    selectAll() {
      const { isSelectedAll, applicantItems } = this;
      const newApplicantItems = applicantItems.map((item) => {
        item.isSelected = !isSelectedAll;
        return item;
      });
      this.isSelectedAll = !isSelectedAll;
      this.applicantItems = newApplicantItems;
    },
    // 完成批量编辑
    finishBatchEdit() {
      // 在这里编写完成批量编辑的逻辑，例如提交选中的申请者信息等
      const selectedApplicants = this.applicantItems.filter(
        (item) => item.isSelected
      );
      console.log("选中的申请者信息：", selectedApplicants);
      // 完成后可以退出批量编辑模式
      this.isBatchEdit = false;
    },
    // 其他函数和生命周期方法...
  },
};
</script>
<style scoped>
.app {
  background-color: hsl(0, 0%, 98%);
  height: 80vh;
  display: flex;
  flex-direction: column;
}

.job-item {
  margin: 1rem;
  padding: 1rem;
  background: #fff;
}

.job-item > view {
  margin: 1rem 0;
}

.job-item-header {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.job-item-title {
  font-size: 24px;
}

.job-type {
  display: flex;
  align-items: center;
  color: white;
  padding: 0 0.5rem;
  border-radius: 0.3rem;
}

.job-type-gig {
  background-color: #34a1ff;
}

.job-type-hourly {
  background-color: #f32763;
}

.job-item-dateNamount {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.job-item-recruitment {
  background-color: hsl(0, 0%, 98%);
  display: flex;
  justify-content: space-around;
  padding: 1rem;
}

.recruiting {
  color: #317ed0;
}

.job-item-recruitment > view {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.job-item-recruitment > view > text:nth-child(2) {
  color: gray;
}

.job-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.job-item-status {
  font-weight: 900;
}

.job-item-footer > .operation {
  display: flex;
  gap: 10px;
}

.job-item-footer > .operation > .button {
  font-size: 12px;
  padding: 0.25rem 1rem;
  border: 1px solid gray;
  border-radius: 10rem;
  font-weight: 900;
}

.operation {
  display: flex;
  gap: 20px;
  color: #00000073;
}

.real-name {
  border-radius: 0.5rem;
  background: #ffebd1;
}
</style>
